<template>
  <div :id="elementId"></div>
</template>
<script>
export default {
  props: {
    // 传递的标签id必传,任意值
    elementId: {
      type: String
    },
    // 鼠标悬停显示信息，默认是柱状图和折线图显示，当饼状图要传递为item
    tooltipType: {
      type: String,
      default: 'axis'
    },
    // 定义的颜色
    colorList: {
      type: Array,
      default: () => {
        return [
          '#00ffac',
          '#ffcf47',
          '#c0ff78',
          '#61a6ff',
          '#ff92d1',
          '#a562ff'
        ]
      }
    },
    titleText: {
      // 标题文本 - 1
      type: String,
      default: ''
    },
    legendName: {
      // 标记名称 - 1
      type: Array,
      default() {
        return []
      }
    },
    xAxisData: {
      // x轴数据 - 1
      type: Array,
      default() {
        return []
      }
    },
    // 是否显示x轴，默认显示
    showX: {
      type: Boolean,
      default: true
    },
    // 是否显示y轴，默认显示
    showY: {
      type: Boolean,
      default: true
    },
    seriesData: {
      // 数据
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      charts: null
    }
  },
  methods: {
    // 绘制echarts图
    drawLine() {
      this.charts = this.$echarts.init(document.getElementById(this.elementId))
      this.charts.on('click', this.eConsole)
      this.charts.setOption({
        color: this.colorList,
        title: {
          left: 'left',
          top: '4%',
          text: this.titleText, // 标题文本
          textStyle: {
            color: '#fff',
            fontSize: '12'
          }
        },
        tooltip: {
          trigger: this.tooltipType,
          appendToBody: true,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: '2%',
          icon: 'rect',
          //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，																																												none
          itemWidth: 15, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 10, // 设置间距
          data: this.legendName, // 区域名称
          textStyle: {
            color: '#fff',
            fontSize: '10'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          // x 轴
          type: 'category',
          boundaryGap: true,
          show: this.showX,
          data: this.xAxisData,
          axisLabel: {
            color: '#fff',
            fontSize: 12,
            interval: 0, // 横轴信息全部显示
            rotate: 30 // -30角度倾斜显示
          },
          axisTick: {
            // 不显示X轴的刻度
            show: false
          },
          // X轴颜色
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#30DBE6'
            }
          }
        },
        yAxis: {
          // y 轴
          type: 'value',
          show: this.showY,
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#30DBE6'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#30DBE6'
            }
          }
        },
        // 区域数据
        series: this.seriesData
      })
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine()
    })
  }
}
</script>

<style scoped lang="scss">
div {
  width: 100%;
  height: 100%;
}
</style>
